<template>
  <div id="register">
    <i class="logo"></i>
    <div class="input-block">
      <div class="item">
        <i class="mobile"></i>
        <input type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" />
      </div>
      <div class="item">
        <i class="lock"></i>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </div>
    </div>
    <div class="nav-register">
      <span @click="navRegister">注册>></span>
    </div>
    <div class="button-block">
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [Dialog.name]: Dialog
  },
  name: "register",
  data() {
    return {
      mobile: "", //手机号码
      password: "" //密码
    };
  },
  methods: {
    // 登录
    login() {
      let _this = this;
      let mobile = this.mobile;
      let password = this.password;
      const verify = /^1[345789]\d{9}$/; //电话号正则
      mobile = mobile.replace(/\s+/g, "");
      if (!verify.test(mobile) && mobile.length != 11) {
        Toast.info("请输入正确手机号", 2000);
        return;
      }
      if (password == "") {
        Toast.info("请输入密码", 2000);
        return;
      }
      let params = {
        nickname,
        mobile,
        password,
        newpassword
      };
      return;
      https
        .fetchPost(config.login, params)
        .then(res => {
          if (res.data.code == 1) {
          } else {
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    navRegister() {
      this.$router.push({
        path: "/register"
      });
    }
  },
  created() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#register {
  .logo {
    display: block;
    margin: 80px auto 50px;
    width: 250px;
    height: 155px;
    background: url("/static/images/register/logo.png") center center no-repeat;
    background-size: 100%;
  }
  .nav-register {
    color: #2f86f6;
    font-size: 24px;
    text-align: right;
    padding: 0 90px;
  }
  .input-block {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #fff;
    // box-shadow: 0 0 1px 1px #ddd;
    width: 670px;
    padding: 40px 40px 50px;
    border-radius: 20px;
    .item {
      position: relative;
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #eee;
      i {
        width: 80px;
        height: 80px;
        margin-right: 20px;
        &.name {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
        &.mobile {
          background: url("")
            no-repeat center center;
          background-size: 60%;
        }
        &.code {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
        &.lock {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
      }
      input {
        height: 80px;
        border: none;
        width: 500px;
        outline: none;
        color: #333;
        font-size: 26px;
      }
      input::-webkit-input-placeholder {
        color: #999;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #999;
      }
      .get-code {
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 180px;
        font-size: 26px;
        background: #2f86f6;
        color: #fff;
        border-radius: 40px;
      }
      .count-down {
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 180px;
        font-size: 26px;
        color: #999;
      }
    }
  }
  .button-block {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    button {
      border: none;
      width: 600px;
      height: 90px;
      // background: #555;
      background: #2f86f6;
      color: #fff;
      font-size: 32px;
      border-radius: 40px;
      outline: none;
    }
  }
}
</style>
